<template>
  <div class="containerPar">
    <div class="ceshi" v-resize v-if="show"></div>
    <div>{{ width }}</div>
    <el-button @click="show=!show">消失</el-button>
  </div>

</template>

<script>
export default {
  directives: {
    resize: {
      bind(el, bindding, vnode, oldVnode) {},
      inserted(el, bindding, vnode, oldVnode) {
        //监听dom的几何变化
        let resizeObsere = new ResizeObserver((entries) => {
          vnode.context.width = entries[0].target.offsetWidth;
        });
        resizeObsere.observe(el);
      },
    },
  },
  data() {
    return {
      width: 0,
      show: true,
    };
  },
  mounted() {},
};
</script>

<style lang='less' scoped>
.containerPar {
  width: 100%;
  height: 100%;
}
.ceshi {
  width: 100%;
  height: 50px;
  padding: 10px;
  border: 1px solid red;
  background-color: pink;
  box-sizing: border-box;
}
</style>